import React, { useState, useEffect } from 'react';
import { Row, Col, Table, Modal, Button, Input, message } from 'antd'
import { PlusOutlined, EditOutlined } from '@ant-design/icons'
import { getTypeListInfo, addType } from '../api/ARTType'
const { Column } = Table

function ARTType(props) {

  const [typeList, setTypeList] = useState([])
  const [tableLoading, setTableLoading] = useState(false)
  const [editId, setEditId] = useState(0)
  const [typeName, setTypeName] = useState('')
  const [orderNum, setOrderNum] = useState(100)
  const [modalTitle, setModalTitle] = useState("添加")
  const [modalVisible, setModalVisible] = useState(false)
  const [modalLoading, setModalLoading] = useState(false)

  useEffect(() => {
    getTypeList()
  }, [])

  // 获取类型列表
  const getTypeList = () => {
    setTableLoading(true)
    getTypeListInfo()
      .then(res => {
        setTypeList(res.list)
        setTableLoading(false)
      })
      .catch(_ => {
        setTableLoading(false)
      })
  }
  // 列表操作
  const handleClick = (type, id, typeName, orderNum) => {
    if (type === 'add') {
      resetSubmit()
      setModalTitle('添加')
      setModalVisible(true)
    }
    if (type === 'edit') {
      setModalTitle('编辑')
      setModalVisible(true)
      setEditId(id)
      setTypeName(typeName)
      setOrderNum(orderNum)
    }
  }

  // 提交确定
  const modalHandleOk = () => {
    setModalLoading(true)
    const data = {
      id: editId,
      typeName: typeName,
      orderNum: orderNum
    }
    addType(data)
      .then(res => {
        getTypeList()
        message.success(modalTitle + "成功")
        setModalLoading(false)
        setModalVisible(false)
      })
      .catch(err => {
        message.error(modalTitle + "失败")
        setModalLoading(false)
        setModalVisible(false)
      })
  }
  const modalHancel = () => {
    setModalVisible(false)
    resetSubmit()
  }

  // 清除新增数据
  const resetSubmit = () => {
    setEditId(0)
    setTypeName('')
    setOrderNum(100)
  }

  return (
    <div>
      <Row gutter={5} style={{ marginBottom: '10px' }}>
        <Col span={24} style={{ textAlign: "right" }}>
          <Button type="primary" onClick={() => { handleClick('add') }} icon={<PlusOutlined />}>新增</Button>
        </Col>
      </Row>
      <Row gutter={5}>
        <Col span={24}>
          <Table
            dataSource={typeList}
            size="middle"
            bordered
            loading={tableLoading}
            rowKey={(record, index) => index}
            pagination={false}>
            <Column title="ID" dataIndex="id" key="id" />
            <Column title="类别名称" dataIndex="typeName" key="typeName" />
            <Column title="文章数量" dataIndex="total" key="total" />
            <Column title="类别排序" dataIndex="orderNum" key="orderNum" />
            <Column title="操作" dataIndex="operate" key="operate"
              render={(text, record) => (
                <span style={{ fontSize: '1rem' }}>
                  <EditOutlined
                    onClick={() => { handleClick('edit', record.id, record.typeName, record.orderNum) }}
                    title="编辑"
                    style={{ color: "#E6A23C", margin: "0 6px", cursor: "pointer" }} />
                </span>
              )} />
          </Table>
        </Col>
      </Row>

      {/* 新增框 */}
      <Modal
        title={modalTitle}
        visible={modalVisible}
        onOk={modalHandleOk}
        confirmLoading={modalLoading}
        onCancel={modalHancel}
        okText="确定"
        cancelText="取消"
      >
        <Input placeholder='类别名称' type='text' allowClear value={typeName} onChange={e => { setTypeName(e.target.value) }} />
        <br />
        <br />
        <Input placeholder='类别排序' type='number' allowClear value={orderNum} onChange={e => { setOrderNum(e.target.value) }} />
      </Modal>
    </div>
  )
}

export default ARTType